<template>
  <div class="right-sidebar">
    <el-drawer v-model="drawer" size="auto" :with-header="false" :before-close="close_sidebar">
      <!-- 安卓端占位 -->
      <android-seat />
      <el-menu class="right-sidebar-menu" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
        @select="menu_select">
        <!--封面-->
        <img class="poster" :src="blob" alt="漫画封面">
        <!--名称-->
        <p class="title">{{ chapterName }}</p>
        <!--操作-->
        <el-menu-item index="delete">
          {{ $t('option.delete') }}
        </el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script lang='ts' setup>
import { watch, ref, computed } from 'vue'
import { useRoute } from "vue-router";
import { config } from "@/store";
import bookmarkApi from "@/api/bookmark";
import { ElMessageBox } from "element-plus";
import i18n from '@/i18n';
import androidSeat from '@/layout/components/android-seat.vue';
import imageApi from '@/api/image';
const { t } = i18n.global;

const route = useRoute();

const drawer = ref(false)

const props = defineProps(['info']);
const emit = defineEmits(['reload'])

const chapterName = computed(() => {
  return props.info.chapterName
});

const chapterId = computed(() => {
  return props.info.chapterId
})

const bookmarkId = computed(() => {
  return props.info.bookmarkId
})

const blob = ref('')

watch(() => props.info, async (val) => {
  blob.value = await imageApi.get({file: val.pageImage});
})

watch(
  () => config.rightSidebar,
  (val) => {
    drawer.value = val;
  }
)

function close_sidebar() {
  config.rightSidebar = false;
}

function menu_select(key: string) {
  switch (key) {
    case 'delete':
      ElMessageBox.confirm(t('bookmarkManage.confirm.text'), { type: 'warning' }).then(async () => {
        await bookmarkApi.delete_and_update(bookmarkId.value);
        emit('reload');
      });

      break;
  }
  close_sidebar();
}
</script>

<style scoped lang="less" src="@/style/right-sidebar.less"></style>
